<template>
	<view class="container">
		<!-- 头部 start -->
		<view class="header">
			<view class="top">
				<view class="left">
					<text>当前积分：</text>
					<text style="font-weight: bold;">{{shopInfo.integral}}</text>
				</view>
				<view class="right" @click="openPupop">
					生成卡密
				</view>
			</view>

			<view class="nav">
				<block v-for="item in navList">
					<view class="item" :class="{'nav-active':item.id==navId}" @click="chooseNav(item.id)">
						{{item.title}}
					</view>
				</block>

			</view>
		</view>
		<!-- 头部 end -->



		<view class="body-content">
			<!--  ref：唯一ref pullDown:下拉刷新事件  onReachBottom：上拉加载事件 -->
			<!-- <cc-pullScroolView class="pullScrollView" ref="pullScroll" :back-top="true" :pullDown="pullDown"> -->

			<block v-for="item in camiList" :key="item.id">
				<!-- 内容 start -->
				<view class="item">
					<view class="">
						<view class="top">
							<text>生成时间：</text>
							<text style="color: #333;">{{item.createTime}}</text>
						</view>
						<view class="footer">
							<text style="color: #666;">卡密：</text>
							<text class="txt">{{item.cami}}</text>
						</view>
						<view class="footer" style="padding-top: 20rpx;">
							<text style="color: #666;">积分：</text>
							<text style="color: #ff0000;">{{item.integral}}</text>
						</view>
					</view>
					<view class="fuzhi" @click="copy(item.cami)">
						复制卡密
					</view>
				</view>
				<!-- 内容 end -->
			</block>
			<view style="height:100rpx;width:100%">

			</view>
			<!-- </cc-pullScroolView> -->
		</view>



		<!-- 字体颜色模态框 start -->
		<view class="pupop" v-if="showPupop">
			<view class="content">
				<view class="pupop-header">
					<view>生成卡密</view>
					<image src="../../static/close.png" style="height:50rpx;width: 50rpx;" @click="closePupop"></image>
				</view>

				<view class="pupop-body">
					<view class="item">
						<text style="color: red;font-size: 28rpx;">卡密生成后半个小时内有效</text>
					</view>
					<view class="jifen">
						<view class="jifen-num" @click="inputValueChange(5000)">
							1500
						</view>
						<!-- <view class="jifen-num" @click="inputValueChange(10000)">
							10000
						</view>
						<view class="jifen-num" @click="inputValueChange(15000)">
							15000
						</view>
						<input class="jifen-input" v-model="camiForm.integral" placeholder="请输入赠送积分" /> -->
					</view>
					<view class="item">
						<input class="input" v-model="camiForm.code" placeholder="请输入认证码" />
						<view class="btn" v-if="countdown<=0" @click="startCountdown">验证码</view>
						<view class="btn" v-else>{{countdown}}</view>
					</view>
					<view class="code-btn" @click="generateCami">
						生成卡密
					</view>
				</view>
			</view>
		</view>

	</view>

	<!-- 字体颜色模态框 start -->
</template>

<script>
	// import CCBProjectList from '../../components/ccPageView/CCProjectList.vue';
	import CCBProjectList from '../../uni_modules/cc-pullScroolView/components/cc-pullScroolView/cc-pullScroolView.vue';
	import Http from '../../utils/http';
	const http = new Http()
	export default {
		components: {
			CCBProjectList,
		},
		data() {
			return {
				//  页码 默认1开始
				curPageNum: 1,
				camiList: [],
				shopInfo: "",
				navId: 1,
				camiForm: {
					code: "",
					integral: 1500
				},
				navList: [{
						id: 1,
						title: "待使用"
					},
					{
						id: 2,
						title: "已使用"
					},
					{
						id: 3,
						title: "已失效"
					}
				],
				showPupop: false,
				countdown: 0 // 初始倒计时为0
			}
		},
		onShow() {
			this.getShopInfo()
			this.getCamiList(this.navId)
		},
		methods: {
			resetKamiForm() {
				this.camiForm.code = ""
				this.camiForm.integral = null
				this.showPupop = false;
				this.countdown = 0
			},
			getShopInfo() {
				http.get(`admin/agentShop/getShopInfo`).then(res => {
					this.shopInfo = res.data.data
				})
			},
			getCamiList(navId) {
				http.get(`admin/agentShop/getCamiList?type=${navId}`).then(res => {
					this.camiList = res.data.data
				})
			},
			//生成卡密
			generateCami() {
				if (this.camiForm.integral < 1) {
					return uni.showToast({
						title: "积分不能小于1分",
						icon: "error"
					})
				}
				if (!this.camiForm.code) {
					return uni.showToast({
						title: "验证码不能为空",
						icon: "error"
					})
				}

				http.post("admin/agentShop/getnerateCami", this.camiForm).then(res => {
					console.log("=====>", res);
					if (res.data.code != 200) {
						return uni.showToast({
							title: res.data.msg,
							icon: "none"
						})
					}
					if (res.data.code == 200) {
						this.resetKamiForm()
						this.getShopInfo()
						this.getCamiList(this.navId)
					}

				})

			},
			pullDown() {
				console.log("刷新了");
			},
			chooseNav(id) {
				this.navId = id
				this.getCamiList(id)
			},
			closePupop() {
				this.resetKamiForm()
			},
			openPupop() {
				this.showPupop = true
			},
			inputValueChange(value){
				 this.camiForm.integral = value
			},
			async startCountdown() {
				let res = await http.get("admin/agentShop/generatePhoneCode")
				console.log("res==>", res);
				if (res.data.code != 200) {
					return uni.showToast({
						title: "认证码发送失败",
						icon: "error"
					})
				} else {
					uni.showToast({
						title: "认证码发送成功"
					})
				}
				this.countdown = 60; // 设置倒计时时间为60秒

				const timer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--;
					} else {
						clearInterval(timer); // 清除定时器
					}
				}, 1000);
			},
			copy(text) {
				uni.setClipboardData({
					data: text, // 设置要复制的文本内容
					success(res) {
						uni.showToast({
							title: "复制成功",
						})
					},
					fail(err) {
						console.error("复制失败", err);
						uni.showToast({
							title: "复制失败",
						})
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #f1f1f1;
		height: 100%;
		width: 100%;
	}

	.pullScrollView {
		display: flex;
		flex-direction: column;

	}

	.header {
		position: fixed;
		height: 170rpx;
		width: 100%;
		background: #ffffff;
		border-bottom: 1rpx solid #eee;

		.top {
			display: flex;
			height: 90rpx;
			line-height: 90rpx;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;
			font-size: 32rpx;

			.right {
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				width: 170rpx;
				font-size: 30rpx;
				background: #FF0000;
				color: #fff;
				border-radius: 25rpx;
			}
		}
	}

	.nav {
		display: flex;
		justify-content: space-between;
		height: 80rpx;
		margin: 0 30rpx;
		line-height: 80rpx;

		.item {

			width: 110rpx;
			text-align: center;
			font-size: 32rpx;
		}

		.nav-active {
			border-bottom: 1rpx solid #ff0000;
			font-weight: bold;
			color: #ff0000;
		}
	}

	.body-content {
		padding-top: 180rpx;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 30rpx;
			background: #fff;
			margin: 20rpx;
			border-radius: 20rpx;

			.top {
				padding-bottom: 20rpx;
				font-size: 32rpx;
				color: #666;
			}

			.footer {
				width: 480rpx;
				font-size: 34rpx;
				color: #333;
				white-space: nowrap;
				/* 不换行 */
				overflow: hidden;
				/* 超出部分隐藏 */
				text-overflow: ellipsis;
				/* 以省略号表示溢出 */
			}

			.fuzhi {
				width: 130rpx;
				height: 70rpx;
				background: #ff0000;
				text-align: center;
				color: #fff;
				font-size: 28rpx;
				line-height: 70rpx;
				border-radius: 20rpx;
			}
		}
	}


	.pupop {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 9;

		.content {
			background: #fff;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;

			position: fixed;
			z-index: 19;
			height: 700rpx;
			bottom: 0;
			left: 0;
			right: 0;

			.pupop-header {
				display: flex;
				height: 100rpx;
				justify-content: space-between;
				align-items: center;
				font-size: 36rpx;
				font-weight: bold;
				border-bottom: 1rpx solid #f1f1f1;
				padding: 0 30rpx;

			}

			.pupop-body {
				margin: 20rpx 30rpx;

				.jifen {
					
					display: flex;
					margin-top: 20rpx;
             .jifen-num{
				 width:120rpx;
				 background: orange;
				 margin-right: 10rpx;
				 height: 70rpx;
				 line-height: 70rpx;
				 border-radius: 10rpx;
				 text-align: center;
                color: #fff;
				font-size: 32rpx;
				
 			 }
			 .jifen-input{
				 flex: 1;
				 height: 70rpx;
				 border: 1rpx solid #eee;
				 border-radius: 20rpx;
				 font-size: 30rpx;
				 padding-left: 20rpx;
			 }
				}

				.item {
					display: flex;
					margin-top: 30rpx;
					align-items: center;

					.input {
						flex: 1;
						height: 80rpx;
						line-height: 80rpx;
						border: 1rpx solid #eee;
						padding-left: 20rpx;
					}

					.btn {
						height: 80rpx;
						width: 150rpx;
						background: #ff0000;
						color: #fff;
						border-radius: 16rpx;
						text-align: center;
						line-height: 80rpx;
						margin-left: 20rpx;
					}
				}

				.code-btn {
					height: 100rpx;
					line-height: 100rpx;
					margin: 30rpx;
					background: #ff0000;
					margin-top: 80rpx;
					border-radius: 50rpx;
					text-align: center;
					color: #fff;
				}
			}
		}
	}
</style>